import { Row, Col } from 'antd';
import { Pie, measureTextWidth } from '@ant-design/plots';
import styles from './style/index.less';
import { sizeToReadable } from '@/utils';

export interface SpaceChartProps {
  dataSpace: number;
  fileSpace: number;
}

const SpaceChart = (props: SpaceChartProps) => {
  const { dataSpace, fileSpace } = props;

  function renderStatistic(containerWidth: any, text: any, style: any) {
    const { width: textWidth, height: textHeight } = measureTextWidth(text, style);
    const R = containerWidth / 2; // r^2 = (w / 2)^2 + (h - offsetY)^2

    let scale = 1;
    const scaleFour = 0.4;
    const scaleEight = 0.8;

    if (containerWidth < textWidth) {
      scale = Math.min(
        Math.sqrt(
          Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2))),
        ),
        1,
      );
    }

    const Height = window.innerHeight;

    if (Height <= 450) {
      const textStyleStr = `width:${containerWidth}px;`;
      return `<div style="${textStyleStr};font-size:${scaleFour}em;line-height:${scale < 1 ? 1 : 'inherit'
        };">${text}</div>`;
    } else if (Height <= 540) {
      const textStyleStr = `width:${containerWidth}px;`;
      return `<div style="${textStyleStr};font-size:${scaleEight}em;line-height:${scale < 1 ? 1 : 'inherit'
        };">${text}</div>`;
    } else {
      const textStyleStr = `width:${containerWidth}px;`;
      return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'
        };">${text}</div>`;
    }
  }

  const data = [
    {
      type: '数据大小',
      value: dataSpace,
    },
    {
      type: '文件大小',
      value: fileSpace,
    },
  ];
  const config = {
    legend: {
      layout: 'horizontal',
      position: 'bottom',
      offsetY: 5,
      marker: {
        style: {
          fontSize: '48px',
        },
      },
    },
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    color: ['#FF7D1E', '#EEBD1E'],
    radius: 1,
    innerRadius: 0.8,
    meta: {
      value: {
        formatter: (v: any) => `${v} ¥`,
      },
    },
    label: {
      type: 'inner',
      offset: '-50%',
      style: {
        textAlign: 'center',
        opacity: 0,
      },
      autoRotate: false,
      content: '{value}',
    },
    statistic: {
      title: {
        offsetY: 15,
        style: {
          fontSize: '36px',
        },
        customHtml: (container: any, view: any, datum: any, data: any) => {
          const { width } = container.getBoundingClientRect();
          const text = datum
            ? sizeToReadable(datum.value)
            : sizeToReadable(data.reduce((r: any, d: any) => r + d.value, 0));
          return renderStatistic(width, text, {
            fontSize: 26,
          });
        },
      },
      content: {
        offsetY: 25,
        style: {
          fontSize: '12px',
          color: '#999999',
        },
        customHtml: (container: any, view: any, datum: any) => {
          const { width, height } = container.getBoundingClientRect();
          const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
          const text = datum ? datum.type : '总计';
          return renderStatistic(d, text, {
            fontSize: 16,
          });
        },
      },
    },
    // 添加 中心统计文本 交互
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
      {
        type: 'pie-statistic-active',
      },
    ],
  };
  console.log({...config});
  return (
    <>
      <div className={styles.container}>
        <Row align="middle">
          <Col span={24} className={styles.title}>
            占用存储空间
          </Col>
        </Row>
        <Row style={{ flexGrow: 1, height: '100%' }}>
          <Col span={24} className={styles.content} style={{ height: '100%' }}>
            <Pie {...config} style={{ height: '100%' }} />
          </Col>
        </Row>
      </div>
    </>
  );
};

export default SpaceChart;
